<template>
    <div class="intelligent-advisor">
        <div class="header">
            <div class="title">
                智能参谋
            </div>
            <div class="close">
                <svg-icon icon-class="close" @click="close"></svg-icon>
            </div>
        </div>
        <MessageScroller class="message-scroller" :messages="messages"></MessageScroller>
        <div class="input-box">
            <el-input class="jtyj-input" v-model="inputValue" @keyup.native.enter="() => addMessage(inputValue)"></el-input>
            <el-button style="margin-left: 10px;" class="jtyj-btn-primary" @click="addMessage(inputValue)">发送</el-button>
        </div>
    </div>

</template>

<script>
import MessageScroller from './message-scroller.vue';
export default {
    name: 'IntelligentAdvisor',
    data() {
        return {
            messages: [],
            nextId: 1,
            inputValue: '',

        };
    },
    mounted() {

        // 模拟添加消息
        // setInterval(() => {
        //     this.addMessage(`仿真事件 ${this.nextId}: 系统运行正常。`)
        // }, 1000)

        // setInterval(() => {
        //     this.addMessage(`仿真事件 ${this.nextId}: 系统运行正常系统运行正常系统运行正。`)
        // }, 1000)

        // setInterval(() => {
        //     this.addMessage(`仿真事件 ${this.nextId}: 系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统。`)
        // }, 1000)

        // setTimeout(() => {
        //     this.addMessage(`仿真事件 ${this.nextId}: 系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常。`)
        // }, 1000)
        // setTimeout(() => {
        //     this.addMessage(`仿真事件 ${this.nextId}: 系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常系统运行正常。`)
        // }, 1000)


    },
    components: {
        MessageScroller
    },
    methods: {
        close() {
            this.$emit('close');
        },
        addMessage(content) {
            console.log(1);
            if (this.messages.length > 1000) {
                this.messages.splice(0, this.messages.length - 1000); // 删除前面的元素，只保留最后1000条
            }
            let size = 100 + parseInt(content.length / 34) * 20
            // console.log(size);
            // 30:48:65
            this.messages.push({
                size: size,
                id: this.nextId,
                content: size + content,
                timestamp: new Date(),
                befrom: this.nextId % 2 == 0?'user':'advisor'
            })
            this.nextId++;
        },
    }
};
</script>

<style lang="scss" scoped>
.intelligent-advisor {
    height: 100%;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        background: var(--ui-bg-primary);

        .title {
            color: var(--ui-text-fg-low);
            font-size: var(--ui-font-size-base);
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .close {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
    .message-scroller { 
        height: calc(100% - 30px);
    }

    .input-box {
        display: flex;
        align-items: center;
        position: fixed;
        height: 56px;
        border-top: 1px solid var(--ui-border-color-split);
        bottom: 8px;
        padding: 10px 10px;
        width: 400px;
    }
}
</style>